Форум

engelard · #1 (**permalink**) 16.03.2014, 13:59

Немогу подругизть елемент на страницу с помощью аякса,те кто разбираются - дайте пожалуйста простейший пример без лишнего.

danik.js · #2 (**permalink**) 16.03.2014, 14:33

function loadElement(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url);
    request.send(null);
    request.onreadystatechange = function() {
        if (this.readyState == 4)
            callback(this.responseText);
    };
}


loadElement('/load/element', function(response) {
    alert(response); 
});

По запросу к /load/element сервер должен отдать html код элемента. Можешь использовать другой путь.
Вместо алерта делаешь че нужно, например вставляешь на страницу.

engelard · #3 (**permalink**) 18.03.2014, 12:48

Сообщение от danik.js

По запросу к /load/element сервер должен отдать html код элемента. Можешь использовать другой путь.
Вместо алерта делаешь че нужно, например вставляешь на страницу.

Сложный код какойто... сделал как ты и сказал вместо алерта загрузить на страницу:

<script>
function loadElement(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url);
    request.send(null);
    request.onreadystatechange = function() {
        if (this.readyState == 4)
            callback(this.responseText);
    };
}


loadElement('/load/element', function(response) {
   
 $(document).ready(function(){              
    
     $('#example-1').click(function(){
        
         $(this).load('example.html');
     }) 
});
}); 
</script>

<center>
<div class="example cursor" id="example-1">Click to update</div>
</center>

Но после клика ничего не происходит...

рони · #4 (**permalink**) 18.03.2014, 13:07

Сообщение от engelard

дайте пожалуйста простейший пример без лишнего.

это ваши строки с 15 по 21 но если вы подгрузили jquery

но вам же упростили всё до минимума

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #example-1{
    text-align: center;
  }

  </style>
</head>

<body>



<div class="example cursor" id="example-1">Click to update</div>

<script>
function loadElement(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url);
    request.send(null);
    request.onreadystatechange = function() {
        if (this.readyState == 4)
            callback(this.responseText);
    };
}


loadElement('example.html', function(response) {

  document.getElementById('example-1').innerHTML =  response
});
</script>

</body>

</html>

engelard · #5 (**permalink**) 20.03.2014, 15:58

Сообщение от рони

это ваши строки с 15 по 21 но если вы подгрузили jquery

но вам же упростили всё до минимума

спасибо,в этот раз хотябы загрузился контент с файла example,но он загрузился сразу при загрузке страницы а не после клика по спойлеру вот сами посмотрите http://historyofdota.info/link/test.html

рони · #6 (**permalink**) 20.03.2014, 16:07

engelard,
а сами поставить клик?

<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #example-1{
    text-align: center;
  }

  </style>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>



<div class="example cursor" id="example-1">Click to update</div>

<script>
function loadElement(url, callback) {
    var request = new XMLHttpRequest();
    request.open('GET', url);
    request.send(null);
    request.onreadystatechange = function() {
        if (this.readyState == 4)
            callback(this.responseText);
    };
}
var div =  document.getElementById('example-1');
div.onclick = function ()
{
  loadElement('example.html', function(response) {
  div.innerHTML =  response
})
}
;
</script>

</body>

</html>

engelard · #7 (**permalink**) 20.03.2014, 20:34

Сообщение от рони

engelard,
а сами поставить клик?

я в яваскрипте неок(

спасибо за помощь,наконецто все работает,только осталась маленькая проблемка.Спойлер не закрывается,более того если кликнуть по открывшемуся контенту то он наново будет грузится на страницу...

рони · #8 (**permalink**) 20.03.2014, 20:36

engelard,
а где Спойлер?

engelard · #9 (**permalink**) 20.03.2014, 22:24

Сообщение от рони

engelard,
а где Спойлер?

Вот исправил,но всеравно не закрывается

рони · #10 (**permalink**) 20.03.2014, 22:47

engelard,
могу только посоветовать изучать js

Форум

Справочник

Discord чат

Курсы javascript